<template>
  <div ref="mapContainer" :id="southSeaMapId" style="width: 100%; height: 100%"></div>
</template>
<script>
import '@/assets/map/ol/ol.css';
import { getProjection, getChinaBaseLayer3857 } from '@/map/projMap.js';
import { fromLonLat, toLonLat, transform } from 'ol/proj';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import { Vector as VectorSource } from 'ol/source';
import WKT from 'ol/format/WKT';
import { boundingExtent } from 'ol/extent';
import { Fill, Stroke, Style, Icon, Circle as CircleStyle, Text } from 'ol/style';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
import yellowCircleSmall from '@/assets/map/image/newImage/yellowCircleSmall.png';
import * as turf from '@turf/turf';

export default {
  name: 'SouthChinaSeaMap',
  components: {},
  props: {
    zoom: {
      type: Number,
      default: 3,
    },
    southSeaMapId: {
      type: String,
      default: 'southChinaSeaMap',
    },
  },
  emits: ['getMap'],
  data() {
    return {
      str: 'southChinaSeaMap',
      map: null,
      center: fromLonLat([115, 14]), //4490转3857坐标系
    };
  },
  watch: {},
  setup() {},
  created() {},
  mounted() {
    console.log('mounted');
    let that = this;
    //地图异步加载
    this.$nextTick(function () {
      console.log('地图异步加载');
      //地图异步加载
      setTimeout(() => {
        //初始化地图信息
        that.initMap();
      }, 200);
    });
  },
  destroyed() {
    //生命周期销毁完成
    this.map = null;
    console.log('销毁南海地图');
  },
  methods: {
    initMap() {
      // debugger;
      let that = this;
      let mapStr = this.str;
      // let targetMap = document.getElementById(mapStr + '-map');
      // if (targetMap.innerHTML != '') {
      //   console.log('清空targetMap');
      // }
      // targetMap.innerHTML = ''; //清空
      if (this.map) {
        //避免重复加载地图
        console.log('避免重复加载南海地图');
        return;
      }
      console.log('初始化南海地图');
      //获取投影4490坐标系
      // this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        // target: targetMap.id,
        target: this.southSeaMapId,
        // target: this.$refs.mapContainer,
        /*controls: defaultControls({attributionOptions: {collapsed: false}})
            .extend([new Logo()]),*/
        view: new View({
          center: this.center,
          // maxZoom: 18,
          // minZoom: 3,
          maxZoom: this.zoom,
          minZoom: this.zoom,
          zoom: this.zoom,
          constrainResolution: true, //缩放地图可移动到最近的缩放级别（整数zoom级别）
          // projection: 'EPSG:4490',
          projection: 'EPSG:3857',
          // resolutions:getResolutions()
        }),
      });
      console.log('this.map');
      console.log(this.map);

      //添加超图中国地图蓝色3857
      getChinaBaseLayer3857(this.map);

      //这里是将所有交互都关闭了，可以选择只关闭鼠标，虽然效果不好
      this.map.getInteractions().forEach((element) => {
        element.setActive(false); //false禁止拖拽，true允许拖拽
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ol-zoom {
  display: none;
}
</style>
